<template>
  <h2>v-for 循环数组</h2>
  <span v-for="item in [100,200,300,400,500]" :key="item">
    {{ item }}&nbsp;&nbsp;
  </span>
  <div v-for="(item,index) in 'vue'.split('')">{{ index }}{{ item }}</div>
  <div v-for="(item,index) in ['张三','李四','张丽','王五','赵六','张三丰'].sort(()=>Math.random()>.5?1:-1)">
    <p>({{ (index + 1).toString().padStart(2, '0') }}）{{ item }}</p>
  </div>
  <h2>对象数组</h2>
  {{ person.id }}
  <p v-for="(item,index) in list.sort((a,b)=>b.score-a.score)">
    {{ index }}、{{ item.name }}==={{ item.score }}
    <template v-if="item.sss">
      <h4>学生：{{ item.name }}的各科成绩</h4>
      <p v-for="(value,key,index) in item.sss">
        <div v-if="value<=60" style="background-color: red">
          {{ key }} = {{ value }}
        </div>
        <div v-else>
          {{ key }} = {{ value }}
        </div>
      </p>
    </template>
  </p>
</template>

<script lang="ts" setup>
import {type Ref, ref, type UnwrapRef} from 'vue'

interface user {
  id: number,
  name: string,
  score: number,
  sss?: { 语文?: number, 数学?: number, 英语?: number }
}

const person: Ref<UnwrapRef<user>> = ref({
  id: 100,
  name: '李四',
  score: 80
})

const list: Ref<user[]> = ref([
  {id: 100, name: '李四1', score: 80, sss: {语文: 80, 数学: 90, 英语: 50}},
  {id: 200, name: '李四2', score: 30, sss: {英语: 99}},
  {id: 300, name: '李四3', score: 20, sss: {语文: 60, 数学: 30, 英语: 55}},
  {id: 400, name: '李四4', score: 90},
])

</script>
